<%@page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script>
    $(document).ready(function(){
        $(".button").button();
        $("#crear_persona").click(function(){
            window.location.href= '<c:url value="/app/page/persona/alta"/>';
        });
        jQuery.ajax({
            type : 'GET',
            url : '<c:url value="/app/persona"/>',
            contentType : 'application/json',
            dataType : 'json',
            success : servicioObtenerPersonasSuccessCallBack,
            error : servicioObtenerPersonasErrorCallBack

        });
        
        
        
        
    });
    
    function servicioObtenerPersonasSuccessCallBack(data){
    	var cantidadPersonas = data.length;
        $("#persona_row_tmpl").tmpl(data).appendTo("#listado");
        if (cantidadPersonas > 0) {
            $("#listado_persona tfoot th span").text(cantidadPersonas + " personas");
        }
    }
    function servicioObtenerPersonasErrorCallBack(data) {
        $("#listado").append(
                $("<tr/>").append( 
                    $("<td/>").attr("colspan","6").text("Error al obtener el listado de personas")
                ) 
        );
    }            
</script>
<script id="persona_row_tmpl" type="text/x-jquery-tmpl">
    <tr>
        <td>\${apellido}, \${nombre}</td>
        <td>\${tipoDoc}, \${numeroDoc}</td>
        <td>\${email}</td>
        <td>\${telefono}</td>
        <td>\${telefonoMovil}</td>
        <td>
            <a href='<c:url value="/app/page/persona/edicion/id/"/>\${id}'>editar</a>
        </td>
    </tr>

</script>
<div class="content">
    <div class="row">
        <h2>Personas</h2>
        
    </div>
    <div class="row">
        <table id="listado_persona" class="listado">
            <thead>
                <tr>
                    <th>Apellido, Nombre</th>
                    <th>Documento</th>
                    <th>E-mail</th>
                    <th>Tel. Particular</th>
                    <th>Tel. M&oacute;vil</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th colspan="6">
                        <span>&nbsp;</span>
                    </th>
                </tr>
            <tfoot>    
            <tbody id="listado">
                
            </tbody>
        </table>
        <button class="button" id="crear_persona">Ingresar una persona</button>
    </div>        
